<!-- 编辑用户 -->
<template>
  <Dialog v-model="dialogShow" :title="dialogTitle" width="600px" @confirm="confirm" @close="close" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="use-dialog-header">
        <div :id="titleId" :class="titleClass">{{ dialogTitle }}</div>
        <div class="close">
          <el-icon @click="close">
            <CloseBold />
          </el-icon>
        </div>
      </div>
    </template>
    <div class="main">
      <el-form ref="formRef" class="form" :model="formData" :rules="rules">
        <el-form-item label="账号" prop="userAccount">
          <el-input v-model="formData.userAccount" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="userPwd">
          <el-input v-model="formData.userPwd" show-password placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="btns">
        <div><el-button round size="large" type="primary" @click="confirm">确认</el-button></div>
      </div>
    </template>
  </Dialog>
</template>

<script setup>
import api from "@/api";
const dialogTitle = ref("");
const dialogShow = ref(false);

const formRef = ref();
const formData = ref({
  userAccount: "",
  userPwd: "",
});

const rules = {
  userAccount: [{ required: true, message: "请输账号", trigger: "blur" }],
  userPwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
};

const show = (title, row) => {
  dialogTitle.value = title;
  dialogShow.value = true;
};

const confirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      api.post("/user/admin/add", formData.value, { msg: true, loading: true }).then(() => {
        emit("updata");
        reset();
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const close = () => {
  reset();
  console.log("关闭弹窗");
};

// 重置表单
const reset = () => {
  formRef.value.resetFields();
  dialogShow.value = false;
};

const emit = defineEmits(["updata"]);
defineExpose({ show });
</script>
<style lang="scss" scoped>
.main {
  margin: 0 20px;
}

.captcha {
  flex: 1;
  margin-right: 10px;
}

.toggle {
  .el-button--text {
    color: var(--use-color-warning);
    font-size: 16px;
  }
}

.btns {
  margin: 0 20px 20px;

  .el-button {
    width: 100%;
  }
}

.form {
  .label {
    display: inline-flex;
    align-items: center;

    .num {
      width: 18px;
      height: 18px;
      line-height: 18px;
      border-radius: 2px;
      background: var(--use-color-light-2);
      text-align: center;
      font-size: 12px;
      margin-right: 8px;
    }
  }
}

.tip {
  color: var(--use-color-danger);
}
</style>
